<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        /*
        01
            <header></header>头部
            <section></section>区块
            <main></main>主要区域
            <article></article>主要内容
            <aside></aside>主要内容
            <footer></footer>主要内容
            <audio src='' controls autoplay loop='true'></audio>  // controls 控制⾯板
            <video src='' poster='imgs/aa.jpg' controls></video>   (
                poster：指定视频还没有完全下载完毕，或者⽤户还没有点击播放前显示的封⾯。默认显示当前视
                频⽂件的第⼀针画⾯，当然通过poster也可以⾃⼰指定。
                controls 控制⾯板
                width
                height
            )

            <video>
                <source src='aa.flv' type='video/flv'></source>
                <source src='aa.mp4' type='video/mp4'></source>
            </video>
            source标签,因为浏览器对视频格式⽀持程度不⼀样，为了能够兼容不同的浏览器，可以通过source来指定视频源。
            <canvas id="myCanvas" width="200" height="100"></canvas>

            （1）新增语义化标签：nav、header、footer、aside、section、article
            （2）⾳频、视频标签：audio、video
            （3）数据存储：localStorage、sessionStorage
            （4）canvas（画布）、Geolocation（地理定位）、websocket（通信协议）,webWorker
            （5）input标签新增属性：placeholder、autocomplete、autofocus、required
            （6）history API：go、forward、back、pushstate

            img的srcset属性的作⽤？
            根据屏幕密度设置不同的图⽚。这时就⽤到了 img 标签的srcset属性。srcset属
            性⽤于设置不同屏幕密度下，img 会⾃动加载不同的图⽚。⽤法如下：<img src="image-128.png" srcset="image-256.png 2x" />
            02

            DOCTYPE是HTML5中一种标准通用标记语言的文档类型声明，它的目的是告诉浏览器(解析器)应该以什么样(html或xhtml)的文档类型定义来解析文档，不同的渲染模式会影响浏览器对 CSS 代码甚至 JavaScript 脚本的解析。它必须声明在HTML文档的第一行。
            3/615
            浏览器渲染页面的两种模式(可通过document.compatMode获取，比如，语雀官网的文档类型是cSS1Compat):
            CSS1Compat:标准模式(Strick mode)，默认模式，浏览器使用W3C的标准解析染页面。在标准模式中，浏览器以其支持的最高标准呈现页面。
            BackCompat:怪异模式(混杂模式)(Quick mode)，浏览器使用自己的怪异模式解析渲染页面。在怪异模式中，页面以一种比较宽松的向后兼容的方式显示

            defer 和 async属性都是去异步加载外部的JS脚本⽂件，它们都不会阻塞⻚⾯的解析

            如果没有defer或async属性，浏览器会⽴即加载并执⾏相应的脚本。它不会等待后续加载的⽂档元素，
读取到就会开始加载和执⾏，这样就阻塞了后续⽂档的加载

        meta 标签由 name 和 content 属性定义，⽤来描述⽹⻚⽂档的属性，⽐
        refresh ，⻚⾯重定向和刷新：
        charset ，⽤来描述HTML⽂档的编码类型：
        viewport ，适配移动端，可以控制视⼝的⼤⼩和⽐例  (
            width viewport ：宽度(数值/device-width)
            height viewport ：⾼度(数值/device-height)
            initial-scale ：初始缩放⽐例
            maximum-scale ：最⼤缩放⽐例
            minimum-scale ：最⼩缩放⽐例
            user-scalable ：是否允许⽤户缩放(yes/no）
        )

        内元素有： a b span img input select strong ；
        块级元素有： div ul ol li dl dt dd h1 h2 h3 h4 h5 h6 p ；

        空元素，即没有内容的HTML元素。空元素是在开始标签中关闭的，也就是空元素没有闭合标签：
        常⻅的有： <br> 、 <hr> 、 <img> 、 <input> 、 <link> 、 <meta> ；
        鲜⻅的有： <area> 、 <base> 、 <col> 、 <colgroup> 、 <command> 、 <embed> 、
        <keygen> 、 <param> 、 <source> 、 <track> 、 <wbr> 。
        */ 
    </script>
</body>
</html>